<template>
  <div style="width:93%;height: 100%">
    <el-empty description="暂时没有用户哟～" v-if="showNoUser"></el-empty>
    <el-table
        v-else
        class="animate__animated animate__fadeInRight"
        v-loading="getTableLoading"
        element-loading-text="加载中..."
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        style="width: 100%;">
      <el-table-column
          fixed
          align="center"
          width="80"
          type="index">
      </el-table-column>
      <el-table-column
          align="center"
          prop="userid"
          fixed
          label="用户编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="userImg"
          label="用户头像"
          align="center"
          width="120">
        <template v-slot="scope">
          <div class="userImg">
            <img :src="scope.row.userImg">
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="用户昵称"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户账号"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="password"
          label="用户密码"
          align="center"
          width="120">
        <template slot-scope="scope">
          <div class="inputDeep">
            <el-input :value="scope.row.password" class="inputStyle"
                      :readonly="true" show-password/>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="userEmail"
          label="用户邮箱"
          align="center"
          width="200">
        <template slot-scope="scope">
          <div class="inputDeep">
            <el-input :value="scope.row.userEmail" class="inputStyle"
                      :readonly="true" show-password/>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="userTel"
          label="用户电话"
          align="center"
          width="180">
        <template slot-scope="scope">
          <div class="inputDeep">
            <el-input :value="scope.row.userTel"
                      v-if="scope.row.userTel"
                      class="inputStyle"
                      :readonly="true" show-password/>
            <span v-else>用户暂未绑定手机号</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          label="短信剩余量"
          align="center"
          width="180">
        <template v-slot="scope">
          <span v-if="scope.row.userNoteInfo.noteResidue">{{ scope.row.userNoteInfo.noteResidue }}条</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="userRole"
          label="用户角色"
          align="center"
          width="120"
          :filters="[{ text: '超级管理员', value: 'superAdmin' },
          { text: '管理员', value: 'admin' },{text: '普通用户',value: 'user'}]"
          :filter-method="filterRole"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.userRole === 'superAdmin' ? 'success' :
              scope.row.userRole === 'admin'?'primary':'info'"
              disable-transitions>
            {{
              scope.row.userRole === 'superAdmin' ? '超级管理员' :
                  scope.row.userRole === 'admin' ? '管理员' : '普通用户'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          align="center"
          width="270">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="searchText"
              placeholder="输入用户邮箱查询用户">
            <template slot="append">
              <el-button icon="el-icon-search" @click="searchUser"></el-button>
            </template>
          </el-input>
        </template>
        <template slot-scope="scope">
          <el-popover
              placement="left"
              width="700"
              trigger="hover">
            <el-descriptions :title="scope.row.name+'的基本信息'" border>
              <el-descriptions-item label="用户名">{{ scope.row.name }}</el-descriptions-item>
              <el-descriptions-item label="用户账号">{{ scope.row.username }}</el-descriptions-item>
              <el-descriptions-item label="用户邮箱">{{ scope.row.userEmail }}</el-descriptions-item>
              <el-descriptions-item label="用户电话">{{
                  scope.row.userTel ? scope.row.userTel : '暂未绑定手机号'
                }}
              </el-descriptions-item>
              <el-descriptions-item label="短信剩余数量">{{ scope.row.userNoteInfo.noteResidue }} 条</el-descriptions-item>
              <el-descriptions-item label="角色">
                <el-tag
                    :type="scope.row.userRole === 'superAdmin' ? 'success' :
              scope.row.userRole === 'admin'?'primary':'info'"
                    disable-transitions>
                  {{
                    scope.row.userRole === 'superAdmin' ? '超级管理员' :
                        scope.row.userRole === 'admin' ? '管理员' : '普通用户'
                  }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="用户ID">{{ scope.row.userid }}</el-descriptions-item>
              <el-descriptions-item label="用户密码">{{ scope.row.password }}</el-descriptions-item>
            </el-descriptions>
            <el-button type="text" slot="reference"
                       style="margin-right: 10%;"
                       icon="el-icon-view">查看
            </el-button>
          </el-popover>
          &nbsp;&nbsp;
          <el-button type="text"
                     icon="el-icon-edit"
                     style="margin-left: 10%;"
                     @click="updUser(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        layout="prev, pager, next"
        :page-size="pageSize"
        :hide-on-single-page="hidePage"
        @current-change="pageChange"
        :total="total">
    </el-pagination>
    <!--修改弹窗-->
    <el-drawer
        v-if=""
        :title="'用户('+chooseUser.name+')信息修改'"
        :before-close="drawerClose"
        :visible.sync="showUpdate"
        direction="rtl"
        :modal="false"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="chooseUser">
          <el-form-item label="用户名称" :label-width="formLabelWidth">
            <el-input v-model="chooseUser.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户账号" :label-width="formLabelWidth">
            <el-input v-model="chooseUser.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" :label-width="formLabelWidth">
            <el-input v-model="chooseUser.password" autocomplete="off" @change="passwordCheck = true"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" :label-width="formLabelWidth">
            <el-input v-model="chooseUser.userEmail" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户电话" :label-width="formLabelWidth">
            <el-input v-model="chooseUser.userTel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户短信剩余量" :label-width="formLabelWidth">
            <el-input v-model="chooseUser.userNoteInfo.noteResidue" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户角色" :label-width="formLabelWidth">
            <el-select v-model="chooseUser.roleId" placeholder="请选择活动区域">
              <el-option v-for="(role,index) in rolesData"
                         :label="role.roleNameZH"
                         :value="role.roleId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <center>
            <el-button @click="showUpdate = false" :disabled="loading">取 消</el-button>
            <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">
              {{ loading ? '提交中 ...' : '确 定' }}
            </el-button>
          </center>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import {Button, Table, Pagination, Descriptions} from 'element-ui';

export default {
  name: "userTable",
  components: {
    Button, Table, Pagination, Descriptions
  },
  data() {
    return {
      pageSize: 5, //页面大小
      currentPage: 1, //当前页面
      total: 0, //数据总量
      showUpdate: false, //是否展示修改弹窗
      loading: false, //加载状态
      getTableLoading: true, //获取用户数据时候的加载状态
      formLabelWidth: "120px",
      tableData: [],
      rolesData: [],
      searchText: '', //查询邮箱
      passwordCheck: false, //判断密码是否改变
      chooseUser: {
        userid: 'f5f8898d8cc946f9808123088dc7a74b',
        userImg: 'https://little-pig-1258768616.cos.ap-guangzhou.myqcloud.com/%E6%97%A5%E7%A8%8B%E6%B8%85%E5%8D%95/1b7e5379936c44f385a123e00f1c6ab34c1b90d0944ebfec1ffea29bf3a3c6ef.jpg',
        name: '张三',
        username: 'admin',
        password: '123456',
        userEmail: '2465047559@qq.com',
        userTel: "+8615272339673",
        userRole: 'superAdmin',
        noteRole: {
          roleId: "294c371a69f845aebaeb22b0d3cce5b5",
          roleName: "admin",
          roleNameZH: "管理员",
        },
        userNoteInfo: {noteId: '100001', userid: '10001', noteResidue: 5}
      }
    }
  },
  methods: {
    updUser(row) {
      // row 为用户信息
      this.getRoles(); //获取角色信息
      this.showUpdate = true //展示修改界面
      this.chooseUser = row
    },
    //页面发送改变的时候
    pageChange(nowPage) {
      this.currentPage = nowPage;
    },
    //用户角色标签栏
    filterRole(value, row) {
      return row.userRole === value;
    },
    //获取用户数据
    getAllUser() {
      this.$axios({
        url: '/superAdmin/queryAllUser',
        method: 'GET',
      }).then(response => {
        // console.log(response.data);
        if (response.data.noteCode === 200) {
          // this.$message.success(response.data.noteMessage)
          this.tableData = response.data.noteClass
          this.total = response.data.noteClass.length; //设置数据总量
          this.getTableLoading = false; //关闭加载
        }
      }).catch(error => {
        console.log(error.status);
        this.$message.error("服务端错误...");
      })
    },
    //分页获取用户信息
    // getUserByPage(){
    //   let postData = this.$qs.stringify({
    //     pageSize: this.pageSize,
    //     nowPage: this.currentPage - 1,
    //     allCount: this.total,
    //     startPage: this.pageSize * (this.currentPage - 1)
    //   })
    //   this.$axios({
    //     url: '/superAdmin/queryByPage',
    //     method: 'POST',
    //     data: postData
    //   }).then(response => {
    //     console.log(response.data);
    //     if (response.data.noteCode === 200) {
    //       // this.$message.success(response.data.noteMessage)
    //       this.tableData = response.data.noteClass
    //       this.total = response.data.noteClass.length; //设置数据总量
    //     }
    //   }).catch(error => {
    //     console.log(error.status);
    //     this.$message.error("服务端错误...");
    //   })
    // },
    //获取所有的角色
    getRoles() {
      this.$axios({
        url: '/superAdmin/queryAllRole',
        method: 'GET',
      }).then(response => {
        if (response.data.noteCode === 200) {
          // this.$message.success(response.data.noteMessage)
          this.rolesData = response.data.noteClass //设置角色信息
        }
      }).catch(error => {
        console.log(error.status);
        this.$message.error("服务端错误...");
      })
    },
    //修改用户对象属性
    updChooseUser() {
      console.log(this.passwordCheck);
      let putData = this.$qs.stringify({
        name: this.chooseUser.name,
        password: this.chooseUser.password,
        roleId: this.chooseUser.roleId,
        userEmail: this.chooseUser.userEmail,
        userImg: this.chooseUser.userImg,
        userRole: this.chooseUser.userRole,
        userTel: '+86' + this.chooseUser.userTel,
        userid: this.chooseUser.userid,
        username: this.chooseUser.username,
        noteResidue: this.chooseUser.userNoteInfo.noteResidue,
        noteRole: {},
        userNoteInfo: {},
        passwordCheck: this.passwordCheck
      })
      this.$axios({
        url: '/superAdmin/updUser',
        method: 'PUT',
        data: putData
      }).then(response => {
        console.log(response.data);
        if (response.data.noteCode === 200) {
          this.$message.success(response.data.noteMessage)
          //关闭抽屉
          this.showUpdate = false;
          this.loading = false;
        }
      }).catch(error => {
        this.$message.error("服务端错误")
        this.loading = false;
      })
    },
    //查询用户根据输入的值
    searchUser() {
      let re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      if (this.searchText !== '') {
        //通过正则表达式判断邮箱是否合法
        if (re.test(this.searchText)) {
          // this.$message.success(this.searchText);
          //去后端查询根据用户的邮箱
          this.$axios({
            url: '/superAdmin/queryUserByEmail/' + this.searchText,
            method: 'GET'
          }).then(response => {
            if (response.data.noteCode === 200) {
              this.$message.success(response.data.noteMessage);
              this.showUpdate = true;
              this.chooseUser = response.data.noteClass;
            } else {
              this.$message.info(response.data.noteMessage)
            }
          }).catch(error => {
            this.$message.error("请求失败...")
          })
        } else {
          this.$message.error("请输入正确的邮箱！")
        }
      } else {
        this.$message.error("搜索值不能为空...")
      }
    },
    //关闭抽屉
    drawerClose() {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？').then(() => {
        this.loading = true; //开启按钮的提交状态
        this.updChooseUser();
      }).catch(error => {
        this.showUpdate = false;
      })
    }
  },
  computed: {
    showNoUser() {
      return !this.total > 0;
    },
    //隐藏页面
    hidePage() {
      return this.total < this.pageSize
    }
  },
  mounted() {
    this.getAllUser(); //获取用户数据
  }


}
</script>

<style scoped>
.userImg {
  width: 100px;
  height: 100px;
  border-radius: 60px;
}

.userImg img {
  width: 100%;
  height: 100%;
  border-radius: 50px;
}


.inputDeep >>> .el-input__inner {
  border: 0;
  background-color: #ffffff00;
}

.demo-drawer__content, .demo-drawer__footer {
  width: 90%;
  margin: auto;
}

</style>
